<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 
    - primary meta tags
  -->
  <title>Cryptoza - Trusted & Secure Trading Crypto Wallet</title>
  <meta name="title" content="Cryptoza - Trusted & Secure Trading Crypto Wallet">
  <meta name="description" content="This is a cryptocurrency wallet html template made by codewithsadee.">

  <!-- 
    - favicon
  -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">

  <!-- 
    - preload images
  -->
  <link rel="preload" as="image" href="./assets/images/hero-banner.png">

</head>

<body>

  <!-- 
    - #HEADER
  -->

  <header class="header" data-header>
    <div class="container">

      <a href="#" class="logo">
        <img src="./assets/images/logo.svg" width="185" height="31" alt="Cryptoza home">
      </a>

      <nav class="navbar" data-navbar>

        <div class="navbar-top">

          <a href="#" class="logo">
            <img src="./assets/images/logo.svg" width="185" height="31" alt="Cryptoza home">
          </a>

          <button class="nav-close-btn" aria-label="close menu" data-nav-toggler>
            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
          </button>

        </div>

        <ul class="navbar-list">

          <li>
            <a href="#" class="navbar-link">Home</a>
          </li>

          <li>
            <a href="#" class="navbar-link">Services</a>
          </li>

          <li>
            <a href="#" class="navbar-link">Resources</a>
          </li>

          <li>
            <a href="#" class="navbar-link">Pricing</a>
          </li>

          <li>
            <a href="#" class="navbar-link">Company</a>
          </li>

        </ul>

      </nav>

      <div class="btn-group">
        <a href="#" class="btn ghost-btn">Sign In</a>

        <a href="#" class="btn btn-primary">Get Started</a>
      </div>

      <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
        <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
      </button>

      <div class="overlay" data-overlay data-nav-toggler></div>

    </div>
  </header>





  <main>
    <article>

      <!-- 
        - #HERO
      -->

      <section class="hero" aria-label="home">
        <div class="container">

          <div class="hero-content">

            <h1 class="h1 hero-title">Trusted & Secure Trading Crypto Wallet</h1>

            <p class="hero-text">
              You might wonder why a designer would choose to use Morem text Paragraphs in English or their native
              language.
            </p>

            <div class="btn-group">
              <a href="#" class="btn btn-primary">Get Started</a>

              <a href="#" class="play-btn">
                <div class="icon">
                  <ion-icon name="play" aria-hidden="true"></ion-icon>
                </div>

                <span class="span">How it works</span>
              </a>
            </div>

          </div>

          <div class="hero-banner">
            <figure class="hero-banner">
              <img src="./assets/images/hero-banner.png" width="799" height="823" alt="hero banner" class="w-100">
            </figure>
          </div>

        </div>
      </section>





      <!-- 
        - #PROMO
      -->

      <section class="section promo" aria-label="promo">
        <div class="container">

          <h2 class="h2 section-title text-center">Most Trusted Cryptocurrency Platform</h2>

          <p class="section-text text-center">
            A cryptocurrency is a tradable digital asset or digital form of money, built on blockchain technology that
            only exists
            online.
          </p>

          <ul class="grid-list">

            <li>
              <div class="promo-card bg-gray">

                <div class="card-icon">
                  <ion-icon name="share-social-outline" aria-hidden="true"></ion-icon>
                </div>

                <h3 class="h3 card-title">Best Trading Platform</h3>

                <p class="card-text">
                  Cryptocurrency does not exist in physical form like paper money and is typically not issued by a
                  central authority.
                </p>

                <a href="#" class="btn-link">
                  <span class="span">Explore More</span>

                  <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
                </a>

              </div>
            </li>

            <li>
              <div class="promo-card bg-gray">

                <div class="card-icon">
                  <ion-icon name="pricetags-outline" aria-hidden="true"></ion-icon>
                </div>

                <h3 class="h3 card-title">Transparent Pricing</h3>

                <p class="card-text">
                  Cryptocurrency does not exist in physical form like paper money and is typically not issued by a
                  central authority.
                </p>

                <a href="#" class="btn-link">
                  <span class="span">Explore More</span>

                  <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
                </a>

              </div>
            </li>

            <li>
              <div class="promo-card bg-gray">

                <div class="card-icon">
                  <ion-icon name="shield-checkmark-outline" aria-hidden="true"></ion-icon>
                </div>

                <h3 class="h3 card-title">Trusted Security</h3>

                <p class="card-text">
                  Cryptocurrency does not exist in physical form like paper money and is typically not issued by a
                  central authority.
                </p>

                <a href="#" class="btn-link">
                  <span class="span">Explore More</span>

                  <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
                </a>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #STATS
      -->

      <section class="stats" aria-label="statistics">
        <div class="container">

          <div class="stats-content">

            <h2 class="h2 section-title">Our Best Users Are all over the Worldwide Coverage</h2>

            <p class="section-text">
              You might wonder why a designer would choose to use Morem text Paragraphs Lorem Ipsum available but the
              majority
            </p>

            <p class="section-text">
              embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat
              predefined
              chunks as necessary, making this the first true generator on the Internet.
            </p>

            <ul class="stats-list">

              <li>
                <div class="stats-card bg-gray">

                  <h3 class="h3 card-title">150k+</h3>

                  <p class="card-text">
                    Pepole who Have Joined
                  </p>

                </div>
              </li>

              <li>
                <div class="stats-card bg-gray">

                  <h3 class="h3 card-title">45k+</h3>

                  <p class="card-text">
                    Pepole who Have Joined
                  </p>

                </div>
              </li>

              <li>
                <div class="stats-card bg-gray">

                  <h3 class="h3 card-title">16k+</h3>

                  <p class="card-text">
                    Pepole Joined Altrawallet
                  </p>

                </div>
              </li>

            </ul>

          </div>

          <figure class="stats-banner">
            <img src="./assets/images/stats-banner.png" width="797" height="454" alt="map" class="w-100">
          </figure>

        </div>
      </section>





      <!-- 
        - #MARKET
      -->

      <section class="section market" aria-label="crypto market live price">
        <div class="container">

          <h2 class="h2 section-title text-center">Crypto Market Live Price</h2>

          <p class="section-text text-center">
            Marrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat
            predefined true
            generator.
          </p>

          <div class="table-container">
            <table class="market-table">

              <thead class="table-head">
                <tr class="table-row">

                  <th class="table-heading">Cryptocurrency</th>

                  <th class="table-heading">USD Price</th>

                  <th class="table-heading">1h % Change</th>

                  <th class="table-heading">24h % Change</th>

                  <th class="table-heading">7d % Change</th>

                </tr>
              </thead>

              <tbody class="table-body">

                <tr class="table-row">

                  <td class="table-data wrapper">
                    <img src="./assets/images/coin-1.png" width="64" height="64" loading="lazy" alt="BTC">

                    <div>
                      <h3 class="h3 coin-name">Bitcoin</h3>

                      <span class="span">BTC</span>
                    </div>
                  </td>

                  <td class="table-data">
                    <data class="data" value="39000">39000</data>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.04%">-0.04%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-3.26%">-3.26%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-7.82%">-7.82%</data>
                    </div>
                  </td>

                </tr>

                <tr class="table-row">

                  <td class="table-data wrapper">
                    <img src="./assets/images/coin-2.png" width="64" height="64" loading="lazy" alt="ETH">

                    <div>
                      <h3 class="h3 coin-name">Ethereum</h3>

                      <span class="span">ETH</span>
                    </div>
                  </td>

                  <td class="table-data">
                    <data class="data" value="2896">2896</data>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.6%">-0.6%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-4.73%">-4.73%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-8.89%">-8.89%</data>
                    </div>
                  </td>

                </tr>

                <tr class="table-row">

                  <td class="table-data wrapper">
                    <img src="./assets/images/coin-3.png" width="64" height="64" loading="lazy" alt="USDT">

                    <div>
                      <h3 class="h3 coin-name">Tether</h3>

                      <span class="span">USDT</span>
                    </div>
                  </td>

                  <td class="table-data">
                    <data class="data" value="1">1</data>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.01%">-0.01%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.05%">-0.05%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.04%">-0.04%</data>
                    </div>
                  </td>

                </tr>

                <tr class="table-row">

                  <td class="table-data wrapper">
                    <img src="./assets/images/coin-4.png" width="64" height="64" loading="lazy" alt="BNB">

                    <div>
                      <h3 class="h3 coin-name">Tether</h3>

                      <span class="span">USDT</span>
                    </div>
                  </td>

                  <td class="table-data">
                    <data class="data" value="398">398</data>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.27%">-0.27%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-3.92%">-3.92%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-4.57%">-4.57%</data>
                    </div>
                  </td>

                </tr>

                <tr class="table-row">

                  <td class="table-data wrapper">
                    <img src="./assets/images/coin-5.png" width="64" height="64" loading="lazy" alt="USDC">

                    <div>
                      <h3 class="h3 coin-name">USD Coin</h3>

                      <span class="span">USDC</span>
                    </div>
                  </td>

                  <td class="table-data">
                    <data class="data" value="0">0</data>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.04%">-0.04%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.13%">-0.13%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon green">
                        <ion-icon name="caret-up" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="0.05%">0.05%</data>
                    </div>
                  </td>

                </tr>

                <tr class="table-row">

                  <td class="table-data wrapper">
                    <img src="./assets/images/coin-6.png" width="64" height="64" loading="lazy" alt="XRP">

                    <div>
                      <h3 class="h3 coin-name">XRP</h3>

                      <span class="span">XRP</span>
                    </div>
                  </td>

                  <td class="table-data">
                    <data class="data" value="0">0</data>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.3%">-0.3%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-5.71%">-5.71%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-1.18%">-1.18%</data>
                    </div>
                  </td>

                </tr>

                <tr class="table-row">

                  <td class="table-data wrapper">
                    <img src="./assets/images/coin-7.png" width="64" height="64" loading="lazy" alt="SOL">

                    <div>
                      <h3 class="h3 coin-name">Solana</h3>

                      <span class="span">SOL</span>
                    </div>
                  </td>

                  <td class="table-data">
                    <data class="data" value="95">95</data>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.81%">-0.81%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-6.06%">-6.06%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-13.66%">-13.66%</data>
                    </div>
                  </td>

                </tr>

                <tr class="table-row">

                  <td class="table-data wrapper">
                    <img src="./assets/images/coin-8.png" width="64" height="64" loading="lazy" alt="ADA">

                    <div>
                      <h3 class="h3 coin-name">Cardana</h3>

                      <span class="span">ADA</span>
                    </div>
                  </td>

                  <td class="table-data">
                    <data class="data" value="0">0</data>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon green">
                        <ion-icon name="caret-up" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="0.34%">0.34%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-7.43%">-7.43%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-13.43%">-13.43%</data>
                    </div>
                  </td>

                </tr>

                <tr class="table-row">

                  <td class="table-data wrapper">
                    <img src="./assets/images/coin-9.png" width="64" height="64" loading="lazy" alt="LUNA">

                    <div>
                      <h3 class="h3 coin-name">Terra</h3>

                      <span class="span">LUNA</span>
                    </div>
                  </td>

                  <td class="table-data">
                    <data class="data" value="76">76</data>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.21%">-0.21%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-6.12%">-6.12%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-13.79%">-13.79%</data>
                    </div>
                  </td>

                </tr>

                <tr class="table-row">

                  <td class="table-data wrapper">
                    <img src="./assets/images/coin-10.png" width="64" height="64" loading="lazy" alt="AVAX">

                    <div>
                      <h3 class="h3 coin-name">Avalanche</h3>

                      <span class="span">AVAX</span>
                    </div>
                  </td>

                  <td class="table-data">
                    <data class="data" value="73">73</data>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-0.63%">-0.63%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-6.23%">-6.23%</data>
                    </div>
                  </td>

                  <td class="table-data">
                    <div class="wrapper-flex">
                      <div class="icon red">
                        <ion-icon name="caret-down" aria-hidden="true"></ion-icon>
                      </div>

                      <data class="data" value="-11.01%">-11.01%</data>
                    </div>
                  </td>

                </tr>

              </tbody>

            </table>
          </div>

        </div>
      </section>





      <!-- 
        - #CTA
      -->

      <section class="section cta bg-gray" aria-label="call to action">
        <div class="container">

          <h2 class="h2 section-title text-center">Start Trading on Quiety</h2>

          <p class="section-text text-center">
            If you use this site regularly and would like to help keep the site on the Internet, please consider
            donating a small.
          </p>

          <a href="#" class="btn btn-primary">
            <span class="span">Read Reviews</span>

            <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
          </a>

        </div>
      </section>





      <!-- 
        - #INSTRUCTION
      -->

      <section class="section instruction" aria-label="instruction">
        <div class="container">

          <h2 class="h2 section-title text-center">How it All Started</h2>

          <p class="section-text text-center">
            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
            some form,
            by injected
          </p>

          <ul class="grid-list">

            <li>
              <div class="instruction-card bg-gray">

                <div class="card-icon">
                  <img src="./assets/images/instruction-icon-1.svg" width="20" height="20" loading="lazy" alt="icon">
                </div>

                <p class="card-text">
                  In publishing and graphic design, Lorem used to demonstrate the visual form of relying on meaningful
                  content.
                </p>

              </div>
            </li>

            <li>
              <div class="instruction-card bg-gray">

                <div class="card-icon">
                  <img src="./assets/images/instruction-icon-2.svg" width="20" height="20" loading="lazy" alt="icon">
                </div>

                <p class="card-text">
                  In publishing and graphic design, Lorem used to demonstrate the visual form of relying on meaningful
                  content.
                </p>

              </div>
            </li>

            <li>
              <div class="instruction-card bg-gray">

                <div class="card-icon">
                  <img src="./assets/images/instruction-icon-3.svg" width="20" height="20" loading="lazy" alt="icon">
                </div>

                <p class="card-text">
                  In publishing and graphic design, Lorem used to demonstrate the visual form of relying on meaningful
                  content.
                </p>

              </div>
            </li>

            <li>
              <div class="instruction-card bg-gray">

                <div class="card-icon">
                  <img src="./assets/images/instruction-icon-4.svg" width="20" height="20" loading="lazy" alt="icon">
                </div>

                <p class="card-text">
                  In publishing and graphic design, Lorem used to demonstrate the visual form of relying on meaningful
                  content.
                </p>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #APP
      -->

      <section class="app" aria-label="app">
        <div class="container">

          <div class="app-card bg-gray">

            <div class="card-content">

              <h2 class="h2 section-title">Also Available on IOS & Android</h2>

              <p class="section-text">
                This site regularly and would like to help keep the site on the Internet please consider donating a
                small.
              </p>

              <div class="btn-group">

                <a href="#" class="btn btn-primary">
                  <ion-icon name="logo-google-playstore" aria-hidden="true"></ion-icon>

                  <div>
                    <p class="btn-text">Available on the</p>

                    <p class="btn-title">Play Store</p>
                  </div>
                </a>

                <a href="#" class="btn btn-primary">
                  <ion-icon name="logo-apple" aria-hidden="true"></ion-icon>

                  <div>
                    <p class="btn-text">Available on the</p>

                    <p class="btn-title">Apple Store</p>
                  </div>
                </a>

              </div>

            </div>

            <figure class="card-banner">
              <img src="./assets/images/download-banner.png" width="383" height="384" loading="lazy"
                alt="download banner" class="w-100">
            </figure>

          </div>

        </div>
      </section>

    </article>
  </main>





  <!-- 
    - #FOOTER
  -->

  <footer class="footer">

    <div class="footer-top section">
      <div class="container">

        <div class="footer-brand">

          <a href="#" class="logo">
            <img src="./assets/images/logo.svg" width="185" height="31" alt="Cryptoza home">
          </a>

          <p class="footer-text">
            Bitcoin, first released as open-source software in is the first decentralized cryptocurrency. Since the
            release of
            bitcoin
          </p>

        </div>

        <ul class="footer-list">

          <li>
            <a href="#" class="footer-link">Home</a>
          </li>

          <li>
            <a href="#" class="footer-link">About</a>
          </li>

          <li>
            <a href="#" class="footer-link">Market</a>
          </li>

          <li>
            <a href="#" class="footer-link">Trading</a>
          </li>

          <li>
            <a href="#" class="footer-link">Team</a>
          </li>

        </ul>

        <div class="social-wrapper">

          <p class="h3 social-list-title">Join the Conversation</p>

          <ul class="social-list">

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-facebook"></ion-icon>
              </a>
            </li>

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-twitter"></ion-icon>
              </a>
            </li>

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-dribbble"></ion-icon>
              </a>
            </li>

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-behance"></ion-icon>
              </a>
            </li>

          </ul>

        </div>

      </div>
    </div>

    <div class="footer-bottom">
      <div class="container">

        <p class="copyright">
          Copyright codewithsadee 2022. All rights reserved.
        </p>

        <ul class="footer-bottom-list">

          <li>
            <a href="#" class="footer-bottom-link">Support</a>
          </li>

          <li>
            <a href="#" class="footer-bottom-link">Privacy Policy</a>
          </li>

        </ul>

      </div>
    </div>

  </footer>





  <!-- 
    - custom js link
  -->
  <script src="./assets/js/script.js" defer></script>

  <!-- 
    - ionicon-link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>